<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      @scroll="handleScroll"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <!-- 顶部 搜索 banner -->
      <view>
        <u-navbar
          backIconColor="#fff"
          :is-back="true"
          :background="scrollTop >= 100 ? background1 : background"
          :border-bottom="false"
          :title="scrollTop >= 100 ? '公益基金' : ''"
          title-color="#fff"
        >
        </u-navbar>
        <!-- </view> -->
        <view class="" style="position: relative">
          <view
            class="contentBg"
            :style="{
              paddingTop: `${statusBarHeight + navbarHeight}px`,
              backgroundImage: `url(${getImageUrl('jj-bg.png')})`,
              height: `${200 + statusBarHeight}px`,
              top: `-${statusBarHeight + navbarHeight}px`
            }"
          >
          </view>
        </view>
        <view class="content">
          <view class="top dis-flex flex-y-between flex-x-center">
            <view class="page-title">公益基金</view>
            <view
              class="r dis-flex flex-x-center"
              @click="routeTo('/universal/webcontent/webcontent?key=gongyijijin')"
            >
              <u-image
                class="image"
                src="@/static/tishi.png"
                width="28rpx"
                height="28rpx"
              ></u-image>
              <text> 规则说明</text>
            </view>
          </view>
          <view class="card">
            <view class="card-tl dis-flex flex-y-between flex-x-center">
              <view class="tl-l">教育基金池</view>
              <view class="tl-r dis-flex flex-x-center" @click="routeTo('/jijin/rank?type=1')">
                <text>贡献榜</text>
                <u-image
                  class="img"
                  src="@/static/enter.png"
                  width="20rpx"
                  height="20rpx"
                ></u-image>
              </view>
            </view>
            <view class="card-count dis-flex flex-y-between">
              <view class="card-item" @click="routeTo('/jijin/log')">
                <view class="price">3688.88</view>
                <view class="des">资金总额(元)</view>
              </view>
              <view class="card-item" @click="routeTo('/jijin/my-list')">
                <view class="price">8.00</view>
                <view class="des">我的贡献(元)</view>
              </view>
            </view>
          </view>
          <view class="card">
            <view class="card-tl dis-flex flex-y-between flex-x-center">
              <view class="tl-l">养老基金池</view>
              <view class="tl-r dis-flex flex-x-center" @click="routeTo('/jijin/rank?type=2')">
                <text>贡献榜</text>
                <u-image
                  class="img"
                  src="@/static/enter.png"
                  width="20rpx"
                  height="20rpx"
                ></u-image>
              </view>
            </view>
            <view class="card-count dis-flex flex-y-between">
              <view class="card-item" @click="routeTo('/jijin/log')">
                <view class="price">78665.88</view>
                <view class="des">资金总额(元)</view>
              </view>
              <view class="card-item" @click="routeTo('/jijin/my-list')">
                <view class="price">45.00</view>
                <view class="des">我的贡献(元)</view>
              </view>
            </view>
          </view>

          <view class="active-box">
            <view class="active-top dis-flex flex-y-between flex-x-center">
              <view class="top-l">公益活动</view>
              <view class="top-r dis-flex flex-x-center" @click="routeTo('/jijin/active-list')">
                <text>更多</text>
                <u-image
                  class="img"
                  src="@/static/enter.png"
                  width="20rpx"
                  height="20rpx"
                ></u-image>
              </view>
            </view>
            <view
              class="active-item dis-flex"
              @click="routeTo('/jijin/active-detail?activeId=' + item.id)"
              v-for="(item, index) in itemList"
              :key="index"
            >
              <u-image
                class="active-img"
                :src="`${getImageUrl('banner.png')} `"
                width="180rpx"
                height="180rpx"
              ></u-image>
              <view class="item-detai">
                <view class="title oneline-hide-1">{{ item.title }}</view>
                <view class="des twoline-hide">{{ item.des }}</view>
                <view class="date">{{ item.date }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      itemList: [
        {
          picUrl: '',
          title: '乡村儿童守护公益计划乡村儿童守护公益',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远，关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        }
      ],
      scrollTop: 0,
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    queryList() {},
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 400rpx;
}

.content {
  position: relative;
  padding: 20rpx;

  .top {
    padding-bottom: 30rpx;

    .page-title {
      font-weight: 600;
      font-size: 42rpx;
      color: #ffffff;
    }

    .r {
      font-size: 24rpx;
      color: #ffffff;
    }

    .image {
      margin-right: 10rpx;
      margin-top: 2rpx;
    }
  }

  .card {
    height: 240rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 20rpx;

    .card-tl {
      .tl-l {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
      }

      .tl-r {
        font-size: 24rpx;
        color: #999999;

        .img {
          // margin-top: 1rpx;
          margin-left: 10rpx;
        }
      }
    }

    .card-count {
      padding: 40rpx 100rpx 10rpx 100rpx;
    }

    .card-item {
      text-align: center;

      .price {
        font-weight: 500;
        font-size: 40rpx;
        color: #333333;
        margin-bottom: 10rpx;
      }

      .des {
        font-size: 26rpx;
        color: #333333;
      }
    }
  }
  .active-box {
    .active-top {
      padding: 10rpx 0 30rpx 0;
      .top-l {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
      }
      .top-r {
        font-size: 24rpx;
        color: #999999;
        .img {
          margin-left: 10rpx;
        }
      }
    }
    .active-item:last-child {
      margin-bottom: 0;
    }
    .active-item {
      height: 220rpx;
      background: #ffffff;
      border-radius: 10rpx;
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      .active-img {
        border-radius: 10rpx;
      }
      .item-detai {
        flex: 1;
        padding-left: 20rpx;
        .title {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          margin-bottom: 20rpx;
        }
        .des {
          font-size: 26rpx;
          color: #666666;
          margin-bottom: 20rpx;
        }
        .date {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}
</style>
